<template>
	<view class="padding_30">
		<uv-input style="background-color: #F6F6F6;" placeholder="搜索好友、群聊" prefixIcon="search" shape="circle"
			prefixIconStyle="font-size: 22px;color: #909399" clearable v-model="keyword"
			@input="getSearchList"></uv-input>
		<view class="title" v-if="friendList.length>0">联系人</view>
		<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="scrollPage" v-if="friendList.length>0">
			<view class="frined-list" v-for="(item,index) in friendList" :key="item.id">
				<view @click="toUserPage(item.id)">
					<image v-if="item.avatar!=''" :src="baseurl + '/' +item.avatar" mode="aspectFill"></image>
					<image v-else src="@/static/images/avatar.png" mode="aspectFill"></image>
				</view>
				<view class="content">
					<view class="name">
						{{item.username}}
					</view>
					<view class="time-info">
						<text class="text1">ID:{{item.account}}</text>
					</view>
				</view>
				<view class="chat-btn" @click="toChat(item.id)">
					私信
				</view>
			</view>

		</scroll-view>
		<view class="title" v-if="groupList.length>0">群聊</view>
		<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="scrollPage2" v-if="groupList.length>0">
			<view class="friend-list" v-for="(item,index) in groupList" :key="item.id">
				<view class="group-avatar">
					<image class="base-avatar" src="https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png"
						mode="aspectFill"></image>
					<!-- <image class="overlay-avatar" src="@/static/images/avatar.png" mode="aspectFill"></image> -->
				</view>
				<text class="nickname">{{item.chat_title}}</text>
				<text class="chat-btn" @click="toGroupChat(item)">进群</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import TencentCloudChat from "@tencentcloud/chat";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		inject
	} from 'vue'
	import {
		messageSearchAPI
	} from '@/api/chat.js'
	import {
		throttle
	} from '@/utils/utils';
	const keyword = ref('')
	const page = ref(1)
	const friendTotal = ref(0)
	const groupTotal = ref(0)
	const friendList = ref([])
	const groupList = ref([])
	const baseurl = ref('')
	const chat2 = inject('$chat')
	onLoad(() => {
		baseurl.value = uni.getStorageSync('baseUrl')
		getSearchList()
	})
	const getSearchList = throttle(async () => {
		friendList.value = []
		groupList.value = []
		let res = await messageSearchAPI({
			page: page.value,
			search_text: keyword.value
		})
		if (res.code == 200 && res.data) {
			uni.hideLoading()
			friendTotal.value = res.data.friend.total
			groupTotal.value = res.data.chat.total
			friendList.value = friendList.value.concat(res.data.friend.data)
			groupList.value = groupList.value.concat(res.data.chat.data)
		} else {
			uni.hideLoading()
		}
	}, 200)
	const scrollPage = () => {
		if (friendList.value.length >= friendTotal.value) {
			uni.showToast({
				title: "没有更多了",
				icon: "none",
				mask: true,
				duration: 800
			})
			return
		}
		page.value++

		uni.showLoading({
			title: "正在加载...",
			mark: true
		})
		getSearchList()
	}
	const scrollPage2 = () => {
		if (groupList.value.length >= groupTotal.value) {
			uni.showToast({
				title: "没有更多了",
				icon: "none",
				mask: true,
				duration: 800
			})
			return
		}
		page.value++

		uni.showLoading({
			title: "正在加载...",
			mark: true
		})
		getSearchList()
	}
	// 去主页
	const toUserPage = (userId) => {
		uni.navigateTo({
			url: '/pages/user/userpage/index?userId=' + userId
		})
	}
	const toChat = (conversationID) => {
		uni.navigateTo({
			url: `/TUIKit/components/TUIChat/index?conversationID=C2C${conversationID}` + '&userId=' +
				conversationID
		});
	}
	const toGroupChat = (item) => {
		// 搜索群是否存在
		let promise = chat2.chat.searchGroupByID(item.id + '');
		promise.then(function(imResponse) {
			const group = imResponse.data.group; // 群组信息
			let join = chat2.chat.joinGroup({
				groupID: group.groupID,
				type: TencentCloudChat.TYPES.GRP_PUBLIC
			});
			// console.log(imResponse, '搜索该群')
			join.then(function(res) {
				// console.log(res, '=============')
				switch (res.data.status) {
					case TencentCloudChat.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
						break;
					case TencentCloudChat.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
						// console.log(res.data.group, '加入成功'); // 加入的群组资料
						uni.navigateTo({
							url: `/TUIKit/components/TUIChat/index?conversationID=GROUP${res.data.group.groupID}`
						});
						break;
					case TencentCloudChat.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
						uni.navigateTo({
							url: `/TUIKit/components/TUIChat/index?conversationID=GROUP${group.groupID}`
						});
						break;
					default:
						break;
				}
			}).catch(function(imError) {
				console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
				uni.$uv.toast('加入群聊失败')
			});
		}).catch(function(imError) {
			uni.$uv.toast('该群不存在或已被群主解散')
			console.warn('searchGroupByID error:', imError); // 搜素群组失败的相关信息
		});

	}
</script>

<style lang="scss" scoped>
	.title {
		padding: 40rpx 0 30rpx 0;
	}

	.frined-list {
		display: flex;
		align-items: center;
		padding: 20rpx 0;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.content {
			flex: 1;
			margin-left: 24rpx;

			.name {
				font-weight: 400;
				font-size: 32rpx;
				color: #222222;
			}

			.time-info {
				padding: 8rpx 0;

				.text1 {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
			}

		}

		.banner-img {
			.img {
				border-radius: 0;
				width: 100rpx;
				height: 100rpx;
			}
		}
	}

	.friend-list {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-top: 45rpx;

		image {
			width: 100rpx;
			height: 100rpx;
		}

		.group-avatar {
			// position: relative;

			.base-avatar {
				border-radius: 50%;
				width: 100rpx;
				height: 100rpx;
			}

			// .overlay-avatar {
			// 	position: absolute;
			// 	top: 10px;
			// 	left: 10px;
			// 	width: 70rpx;
			// 	height: 70rpx;
			// 	border-radius: 50%;
			// }
		}

		.nickname {
			flex: 1;
			padding-left: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #222222;
		}

		.loginout {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}
	}

	.chat-btn {
		width: 160rpx;
		height: 64rpx;
		background: #F6F6F6;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #666666;
		line-height: 64rpx;
		text-align: center;
	}
</style>